<template>
	<div class="recipe-card">
		<h3 class="recipe-title">{{ recipe.name }}</h3>
		<div class="recipe-flow">
			<!-- 原料区 -->
			<div class="ingredients-group">
				<div v-for="(item, index) in recipe.ingredients" :key="index" class="item-container">
					<span class="item-quantity">{{ item.amount }}×</span>
					<el-image :src="Item(item.iconUrl)" class="item-icon" :title="item.name">
						<div slot="error" class="image-error">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
				</div>
			</div>

			<!-- 箭头分隔 -->
			<div class="arrow-separator">→</div>

			<!-- 产物区 -->
			<div class="products-group">
				<div v-for="(item, index) in recipe.products" :key="index" class="item-container">
					<span class="item-quantity">{{ item.amount }}×</span>
					<el-image :src="Item(item.iconUrl)" class="item-icon" :title="item.name">
						<div slot="error" class="image-error">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "SimpleRecipeShow",
		props: {
			recipe: {
				type: Object,
				required: true
			}
		},
		methods: {
			Item(url) {
				return this.$img.i_64(url);
			}
		}
	};
</script>

<style lang="less" scoped>
	@import "@/assets/less/variables.less"; // 引入配色变量

	.recipe-card {
		padding: 12px;
		border: 1px solid @color-border;
		border-radius: 8px;
		background: @color-white;
		transition: box-shadow 0.2s ease;

		&:hover {
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		}
	}

	.recipe-title {
		margin: 0 0 12px 0;
		font-size: 14px;
		font-weight: 500;
		color: @color-text;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.recipe-flow {
		display: flex;
		justify-content: space-around;
		align-items: center;
		gap: 2px;
	}

	.ingredients-group,
	.products-group {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}

	.item-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}

	.item-quantity {
		font-size: 12px;
		color: @color-subtext;
		font-weight: 500;
	}

	.item-icon {
		width: 36px;
		height: 36px;
		border-radius: 6px;
		background: @color-disabled;
		padding: 2px;

		/deep/ .el-image__inner {
			border-radius: 4px;
		}
	}

	.arrow-separator {
		color: @color-subtext;
		font-size: 18px;
		padding: 0 8px;
		opacity: 0.6;
	}

	.image-error {
		width: 100%;
		height: 100%;
		background: #f8f9fa;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ced4da;
		font-size: 18px;
	}
</style>